<template>
	<!-- 多人-音视频界面 -->
	<view class="wechat-container">
		<!-- 顶部导航栏 -->
		<view class="wechat-header">
			<view class="header-left">
				<i class="fa fa-arrow-left" @click="goBack">返回</i>
				<span class="group-name">{{ groupName }}</span>
				<span class="member-count">({{ members.length }})</span>
			</view>
			<view class="header-right">
				<img src="@/static/images/microphone.svg" style="width: 18px;filter: brightness(0) invert(1);"
					@click="showGroupMembers('voice')" alt="" />
				<img src="@/static/images/video.svg" style="width: 22px;filter: brightness(0) invert(1);margin-left: 10px;"
					@click="showGroupMembers('video')" alt="" />
				<!-- #ifdef APP -->
				<i @click="showGroupMembers('voice')"> 语音</i>
				<i @click="showGroupMembers('video')"> 视频</i>
				<!-- #endif -->
			</view>
		</view>

		<!-- 聊天内容区域 -->
		<view class="chat-content" ref="chatContent">
			<view v-for="(message, index) in messages" :key="index"
				:class="['message', message.sender === currentUser.id ? 'message-me' : 'message-other']">
				<view class="message-avatar" v-if="message.sender !== currentUser.id">
					<img :src="getMemberAvatar(message.sender)" alt="avatar">
				</view>
				<view class="message-content">
					<view v-if="message.sender !== currentUser.id" class="sender-name">
						{{ getMemberName(message.sender) }}
					</view>
					<view class="message-bubble" :class="{'voice-message': message.type === 'voice'}">
						<template v-if="message.type === 'text'">
							{{ message.content }}
						</template>
						<template v-else-if="message.type === 'voice'">
							<i class="fa icon-microphone"></i>
							<span>{{ message.duration }}"</span>
						</template>
						<template v-else-if="message.type === 'image'">
							<img :src="message.content" class="message-image">
						</template>
					</view>
				</view>
				<view class="message-avatar" v-if="message.sender === currentUser.id">
					<img :src="currentUser.avatar" alt="avatar">
				</view>
			</view>
		</view>

		<!-- 底部输入区域 -->
		<view class="input-area">
			<view class="input-tools">
				<i class="fa fa-microphone" @click="toggleInputType"></i>
				<i class="fa fa-image" @click="selectImage"></i>
				<i class="fa fa-plus"></i>
			</view>
			<view class="input-main">
				<input v-if="!isVoiceInput" v-model="inputText" type="text" placeholder="输入消息..."
					@keyup.enter="sendTextMessage">
				<view v-else class="voice-input" @touchstart="startRecord" @touchend="stopRecord" @touchcancel="cancelRecord">
					按住说话
				</view>
			</view>
			<view class="input-send" v-if="!isVoiceInput && inputText">
				<button @click="sendTextMessage">发送</button>
			</view>
		</view>

		<!-- 视频会议弹窗 -->
		<view class="meeting-modal" v-if="inMeeting">
			<view class="meeting-content">
				<view class="video-grid">
					<view v-for="(user, uid) in remoteUsers" :key="uid" class="video-item">
						<view class="video-wrapper">
							<video :ref="'video_' + uid" autoplay :muted="uid === localUid"></video>
							<view class="user-info">
								<span>{{ uid === localUid ? '我' : getMemberName(uid) }}</span>
							</view>
							<view class="user-actions" v-if="uid === localUid">
								<button @click="toggleVideoMute">
									<i class="fa" :class="isVideoMuted ? 'fa-video-off' : 'fa-video'"></i>
								</button>
								<button @click="toggleAudioMute">
									<i class="fa" :class="isAudioMuted ? 'fa-microphone-slash' : 'fa-microphone'"></i>
								</button>
							</view>
						</view>
					</view>
				</view>
				<view class="meeting-actions">
					<button @click="toggleVideoMute">
						<i class="fa" :class="isVideoMuted ? 'fa-video-off' : 'fa-video'"></i>
					</button>
					<button @click="toggleAudioMute">
						<i class="fa" :class="isAudioMuted ? 'fa-microphone-slash' : 'fa-microphone'"></i>
					</button>
					<button class="end-call" @click="endMeeting">
						<i class="fa fa-phone"></i>
					</button>
				</view>
			</view>
		</view>

		<!--语音-群成员列表弹窗 -->
		<view class="members-modal" v-if="showMembers">
			<view class="members-content">
				<view class="members-header">
					<h3>群成员 ({{ members.length }})</h3>
					<i class="fa fa-times" @click="showMembers = false">关闭</i>
				</view>
				<!-- 当前用户默认勾选 -->
				<view class="members-list">
					<view v-for="member in members" :key="member.id" class="member-item" @click="onmembers(member)">
						<img :src="member.avatar" class="member-avatar" :class="">
						<span class="member-name" :class="member.flage?'active':''">{{ member.name }}</span>
						<span v-if="member.id === groupOwner" class="member-role">群主</span>
					</view>
				</view>
				<view class="btn_bottom" style="display: flex;">
					<button @click="commplete">完成</button>
					<button @click="cancel">取消</button>
				</view>
			</view>
		</view>
		<!-- 通话记录界面 -->
		<!-- <GroupVoice v-if="callType == 'voice'" :channel-info="channelInfo" :user-info="userInfo"
			:group-info="groupInfo" :is-self="isSelf" @call-action="handleCallAction" /> -->
		<!-- 语音通话弹窗 -->
		<view class="call-modal" v-if="callType == 'voice'" style="background-color: none;">
			<web-view v-if="callType == 'voice'" ref="myView" id="myWebview" style="display: none;" :src="webSrc" @message="handleMessage"
				:style="{'display':callType === 'voice'?'block':'nonde'}"></web-view>
		</view>
		<!-- 视频通话弹窗 -->
		<view class="call-modal" v-if="callType == 'video'" style="background-color: none;">
			<web-view v-if="callType == 'video'" ref="myView1" id="myWebview1" style="display: none;" :src="webSrc" @message="handleMessage1"
				:style="{'display':callType === 'video'?'block':'nonde'}"></web-view>
		</view>
	</view>
</template>

<script>
	import GroupVoice from './components/GroupVoice.vue'//群通话-界面
	import {
		storage
	} from '@/utils/storage.js';
	// #ifdef H5
	// #endif
	export default {
		name: 'GroupChat',
		components: {
			GroupVoice,
		},
		data() {
			return {
				groupName: '项目讨论群',
				groupId: 'group_001',
				groupOwner: 'user_001',//群主id
				currentUser: {
					id: 'user_003',
					name: '我',
					avatar: 'https://img.buildmost.com/image/20220905/d22ca3fa-9566-43e9-8b76-b95a09eb3ea7.jpg?text=我'
				},
				members: [{
						id: 'user_001',
						name: '张三',
						avatar: 'https://hkimg.buildmost.com/image/20240717/e7cca2ec-c8ad-45e2-a168-382753761ca8.jpg?text=张',
						flage:false,//是否选中
					},
					{
						id: 'user_002',
						name: '李四',
						avatar: 'https://img.buildmost.com/image/20230717/25178695-ed66-40f9-ba84-6b266403d4a9.jpg?text=李',
						flage:false,//是否选中
					},
					{
						id: 'user_003',
						name: '我',
						avatar: 'https://img.buildmost.com/image/20211013/419cf426-5fff-4a90-8e7f-18ea48c113b3.jpeg?text=我',
						flage:false,//是否选中
					},
					{
						id: 'user_004',
						name: '王五',
						avatar: 'https://hkimg.buildmost.com/image/20240927/cdb49f84-c858-4947-8077-ad3bca1266ec.jpg?text=王',
						flage:false,//是否选中
					},
					{
						id: 'user_006',
						name: '夏侯惇',
						avatar: 'https://hkimg.buildmost.com/image/20240927/cdb49f84-c858-4947-8077-ad3bca1266ec.jpg?text=夏侯惇',
						flage:false,//是否选中
					}
				],//群成员
				messages: [
					{
						sender: 'user_001',
						type: 'text',
						content: '大家好，欢迎加入项目讨论群！'
					},
					{
						sender: 'user_002',
						type: 'text',
						content: '今天我们要讨论项目进度'
					},
					{
						sender: 'user_003',
						type: 'text',
						content: '我已经完成了前端部分'
					},
					{
						sender: 'user_001',
						type: 'voice',
						duration: 5
					},
					{
						sender: 'user_004',
						type: 'image',
						content: 'https://hkimg.buildmost.com/image/20250331/c645b0bf-89af-48aa-8229-5d217ce30b7b.jpeg?text=设计稿'
					}
				],//群聊天内容
				inputText: '',
				isVoiceInput: false,
				showMembers: false,
				inMeeting: false,
				isRecording: false,
				recordTimer: null,
				recordDuration: 0,
				isVideoMuted: false,
				isAudioMuted: false,
				callType: '',
				webSrc: '',
				isSelf: false, // 是否是自己
				callStatus: 'idle',
				VoiceShow: false,
				// 频道
				// appId: '584d8608c53e4d3cbb3c630feef2b888',
				// channel: 'test_channel',
				// tempToken: '007eJxTYLhnnWjwTSVxWcWnk4nbuneFZax+n3vgw0Orvcfv9S2/KnpUgcHUwiTFwszAItnUONUkxTg5Kck42czYIC01Nc0oycLCwqhCMKMhkJHhj9g/BkYoBPF5GEpSi0vikzMS8/JScxgYAIvEJk4=',
				//声网 token 24小时更换，appid本月结束
				channelInfo:{
					 appId:'a04122acf42f4b0c92e104ff4c863fde',
					 channel:'shiproom',
					 token:'007eJxTYFidk/1qqYAcg+y6A/q+ZexSVmueLth7+uxLhwcPBRaXT3yowJBoYGJoZJSYnGZilGaSZJBsaZRqaGCSlmaSbGFmnJaSeuyDckZDICPD/qIwRkYGCATxORiKMzILivLzcxkYAPz9Il8=',
				 },
				 memberslist:[],//勾选语音成员
				inviteMore:false,
			}
		},
		onLoad(options) {
			console.log('路由参数',options);
			this.userInfo = storage.getItem('userInfo') ? (storage.getItem('userInfo')) : {}
			this.groupId = options.groupId
			this.groupName = options.groupName
			// 
			/***
			*传组件-通话界面（id、群昵称、群成员）
			* groupId  id
			* groupName 群昵称
			* members 群成员
			* */
			this.groupInfo = {
				groupId: this.groupId,
				groupName: this.groupName,
			}
			console.log('userInfo', this.userInfo.id)
			uni.getSystemInfo({
				success: function(res) {
					console.log('res', res)
				}
			})
		},
		mounted() {
			this.scrollToBottom();
			// #ifdef H5
			// window.addEventListener("message", this.handleH5Message);
			// #endif
		},
		methods: {
			onmembers(item){//邀请成员
				item.flage=!item.flage
				console.log({item});
				if(this.memberslist.indexOf(item) === -1) {//勾选是否存在
				    this.memberslist.push(item);
				}else{
				    // 存在,则删除
				    this.memberslist.splice(this.memberslist.indexOf(item),1);
				}
				this.groupInfo = {
					members: this.memberslist,// 2055
				}
				
				console.log(this.groupInfo);
			},
			cleanfn(){
				this.memberslist=[];//清除上次邀请成员
				this.members.forEach(element => {
					element.flage=false		
				});
			},
			goBack() {
				// #ifdef H5
				window.history.go(-1); // 使用浏览器原生返回
				// #endif

				// #ifdef APP-PLUS
				uni.navigateBack(1); // 原生应用使用标准返回
				// #endif
			},
			getChannel(type){
				console.log('type', type)
				// this.channelInfo.channel = this.groupId+'_'+ new Date().getTime() //有推送的情况时间戳更新
				this.channelInfo.channel = this.groupId+'_01'
				const data={
					channelName:this.channelInfo.channel,
					userId:this.userInfo.id
				}
				console.log('data',data)
					uni.request({
					  url: 'http://192.168.119.174:8091/build-app/audioAndVideo/getUserToken', // 接口地址
					  method: 'Post', // 请求方法 GET/POST/PUT/DELETE等
					  data: data,
					  header: { // 请求头
					    'Content-Type': 'application/json',
					  },
					  success: (res) => {
					    console.log('请求成功:', res.data);
							if(res.data.data){
								this.channelInfo.appId = res.data.data.appId
								this.channelInfo.token = res.data.data.token
								console.log('channelInfo',this.channelInfo)
								this.showPage()
							}
					    // 处理返回数据
					  },
					  fail: (err) => {
					    console.error('请求失败:', err);
					    // 处理错误
					  },
					  complete: () => {
					    // 请求完成回调
					  }
					});
			},
			// 
			/**
			 * 通话界面-传过来的点击事件
			 * 
			*inviteMore  
			*invite 邀请事件
			* 
			* handeUp
			* handelUp 挂断
			* 
			* handleJoinError
			* groupAudioCall 连接失败：麦克风、
			* 
			* handlePublishError
			* groupAudioCall 获取权限失败：麦克风
			* */
			handleCallAction(action) {
				// 处理通话动作（接听、拒接、挂断等）
				console.log('通话动作:', action);
				const data = action
				if (data && data.callerId) {
					if (data.callerId == 'caller' && !data.status) {
						console.log('通话动作-- caller');
						this.callType = '';
						const msg = data.userId == this.userInfo.id ? '已取消' : '对方拒接'
						console.log('msg', msg)
						setTimeout(() => {
							uni.showToast({
								title: msg,
								icon: 'none'
							})
						}, 1000)
					} else if (data.callerId == 'handelUp') {
						console.log('通话动作-- handelUp 挂断');
						this.callType = '';
						setTimeout(() => {
							const msg = data.userId == this.userInfo.id ? '已挂断' : '对方已挂断'
							console.log('msg', msg)
							uni.showToast({
								title: msg,
								icon: 'none'
							})
						}, 1000)
					} else if (data.callerId == 'audioCall') {
						console.log('通话动作-- audioCall 挂断');
						this.callType = '';
						setTimeout(() => {
							uni.showToast({
								title: data.error,
								icon: 'none'
							})
						}, 1000)
					}
				}
			},
			// 处理标准 message 事件
			handleH5Message(e) {
				const that = this
				console.log('handleH5Message收到消息:', e);
				if (!e.data) {
					return
				}
				const data = e.data.data.arg ? e.data.data.arg : e.data.data || {}
				console.log('data', data)
				if (data && data.callerId) {
					if (data.callerId == 'caller' && !data.status) {
						this.callType = '';
						const msg = data.userId == this.userInfo.id ? '已取消' : '群聊无人接听'
						console.log('msg', msg)
						setTimeout(() => {
							uni.showToast({
								title: msg,
								icon: 'none'
							})
						}, 1000)
					} else if (data.callerId == 'handelUp') {
						this.callType = '';
						setTimeout(() => {
							const msg = data.userId == this.userInfo.id ? '已挂断' : '群聊已挂断'
							console.log('msg', msg)
							uni.showToast({
								title: msg,
								icon: 'none'
							})
						}, 1000)
					} else if (data.callerId == 'audioCall') {
						this.callType = '';
						setTimeout(() => {
							uni.showToast({
								title: data.error,
								icon: 'none'
							})
						}, 1000)
					} else if (data.callerId == 'invite') {
						// 展示成员列表
						this.showMembers = true;
						this.inviteMore = true
						this.cleanfn();
					}
				}
			},
			// 语音通话回传
			handleMessage(e) {
				console.log('handleMessage收到消息:', e);
				const data = e.detail.data[0]
				console.log('data', data)
				if (data && data.callerId) {
					if (data.callerId == 'caller' && !data.status) {
						this.callType = '';
						const msg = data.userId == this.userInfo.id ? '已取消' : '群聊无人接听'
						console.log('msg', msg)
						setTimeout(() => {
							uni.showToast({
								title: msg,
								icon: 'none'
							})
						}, 1000)
					} else if (data.callerId == 'handelUp') {
						this.callType = '';
						setTimeout(() => {
							const msg = data.userId == this.userInfo.id ? '已挂断' : '群聊已挂断'
							console.log('msg', msg)
							uni.showToast({
								title: msg,
								icon: 'none'
							})
						}, 1000)
					} else if (data.callerId == 'audioCall') {
						this.callType = '';
						setTimeout(() => {
							uni.showToast({
								title: data.error,
								icon: 'none'
							})
						}, 1000)
					}else if (data.callerId == 'invite') {
						// 展示成员列表
						this.showMembers = true;
						this.inviteMore = true
						this.cleanfn();
					}
				}
			},
			// 视频通话回传
			handleMessage1(e) {
				console.log('handleMessage收到消息:', e);
				const data = e.detail.data[0]
				console.log('data', data)
				if (data && data.callerId) {
					if (data.callerId == 'caller' && !data.status) {
						this.callType = '';
						const msg = data.userId == this.userInfo.id ? '已取消' : '对方拒接'
						console.log('msg', msg)
						setTimeout(() => {
							uni.showToast({
								title: msg,
								icon: 'none'
							})
						}, 1000)
					} else if (data.callerId == 'handelUp') {
						this.callType = '';
						setTimeout(() => {
							const msg = data.userId == this.userInfo.id ? '已挂断' : '对方已挂断'
							console.log('msg', msg)
							uni.showToast({
								title: msg,
								icon: 'none'
							})
						}, 1000)
					} else if (data.callerId == 'audioCall') {
						this.callType = '';
						setTimeout(() => {
							uni.showToast({
								title: data.error,
								icon: 'none'
							})
						}, 1000)
					}else if (data.callerId == 'invite') {
						// 展示成员列表
						this.showMembers = true;
						this.inviteMore = true
						this.cleanfn();
					}
				}
			},
			// 勾选语音成员
			commplete() {
				// 判断是否勾选成员，以及提示
				if(this.memberslist.length==0){
					this.showMembers = false
					uni.showToast({
						title: '请选择邀请成员',
						icon: 'none'
					})
					return false
				}
				if(!this.inviteMore){
					this.getChannel()
				}else{
					this.showMembers = false
				}
			},
			showPage() {
				this.callType = this.isType;//展示通话弹窗
				console.log('传值',this.channelInfo,',callType',this.callType);
				this.showMembers = false
				this.$nextTick(() => {
					this.callStatus = 'idle'
					const userInfo = JSON.stringify(this.userInfo)
					const groupInfo = JSON.stringify(this.groupInfo)
					const contactInfo = JSON.stringify(this.contactInfo)
					const pageHtml = this.callType == 'voice' ? 'chartGrougVoice' : 'chartGrougVideo';
					this.webSrc = '../../static/' + pageHtml + '.html?channelInfo=' + encodeURIComponent(JSON.stringify(this.channelInfo)) +
						'&userInfo=' + encodeURIComponent(userInfo) + '&groupInfo=' + encodeURIComponent(groupInfo) +
						'&isSelf=true'
				})
				// #ifdef H5
				window.addEventListener("message", this.handleH5Message);
				// #endif
			},
			cancel() {
				this.showMembers = false
			},
			getMemberName(userId) {
				const member = this.members.find(m => m.id === userId);
				return member ? member.name : '未知用户';
			},
			getMemberAvatar(userId) {
				const member = this.members.find(m => m.id === userId);
				return member ? member.avatar : 'https://via.placeholder.com/50/cccccc/ffffff?text=?';
			},
			// 
			 async showGroupMembers(type) {
				console.log({type});
				this.isType = type
				// 展示成员列表
				this.showMembers = true;
				this.cleanfn();
				this.inviteMore = false
			},
			toggleInputType() {
				this.isVoiceInput = !this.isVoiceInput;
			},
			sendTextMessage() {
				if (this.inputText.trim()) {
					this.messages.push({
						sender: this.currentUser.id,
						type: 'text',
						content: this.inputText
					});
					this.inputText = '';
					this.scrollToBottom();

					// 模拟群成员随机回复
					setTimeout(() => {
						const randomMember = this.members[Math.floor(Math.random() * this.members.length)];
						if (randomMember.id !== this.currentUser.id) {
							this.messages.push({
								sender: randomMember.id,
								type: 'text',
								content: this.generateRandomReply()
							});
							this.scrollToBottom();
						}
					}, 1000 + Math.random() * 2000);
				}
			},
			generateRandomReply() {
				const replies = [
					'好的，明白了',
					'这个方案不错',
					'我这边没问题',
					'需要再讨论一下',
					'什么时候开会？',
					'我已经完成了我的部分'
				];
				return replies[Math.floor(Math.random() * replies.length)];
			},
			startRecord() {
				this.isRecording = true;
				this.recordDuration = 0;
				this.recordTimer = setInterval(() => {
					this.recordDuration++;
				}, 1000);
				console.log('开始录音');
			},
			stopRecord() {
				if (this.isRecording) {
					clearInterval(this.recordTimer);
					this.isRecording = false;
					console.log('结束录音，时长:', this.recordDuration + '秒');

					// 发送语音消息
					this.messages.push({
						sender: this.currentUser.id,
						type: 'voice',
						duration: this.recordDuration
					});
					this.scrollToBottom();
				}
			},
			cancelRecord() {
				if (this.isRecording) {
					clearInterval(this.recordTimer);
					this.isRecording = false;
					console.log('取消录音');
				}
			},
			selectImage() {
				// 实际项目中应该实现图片选择逻辑
				const mockImages = [
					'https://via.placeholder.com/200/07c160/ffffff?text=图片1',
					'https://via.placeholder.com/200/07c160/ffffff?text=图片2'
				];

				// 模拟选择第一张图片
				this.messages.push({
					sender: this.currentUser.id,
					type: 'image',
					content: mockImages[0]
				});
				this.scrollToBottom();
			},
			scrollToBottom() {
				this.$nextTick(() => {
					const container = this.$refs.chatContent;
					container.scrollTop = container.scrollHeight;
				});
			},
			async startVideoMeeting() {
				// #ifdef H5
				try {
					// 初始化客户端
					this.rtcClient = AgoraRTC.createClient({
						mode: "rtc",
						codec: "vp8"
					});

					// 设置事件监听
					this.setupRTCEventListeners();

					// 加入频道
					this.localUid = this.currentUser.id;
					await this.rtcClient.join(this.appId, this.channelName, this.tempToken, this.localUid);

					// 创建并发布本地音视频轨道
					[this.localAudioTrack, this.localVideoTrack] = await AgoraRTC.createMicrophoneAndCameraTracks();
					await this.rtcClient.publish([this.localAudioTrack, this.localVideoTrack]);

					// 添加到本地用户
					this.remoteUsers[this.localUid] = {
						videoTrack: this.localVideoTrack,
						audioTrack: this.localAudioTrack
					};

					this.inMeeting = true;
					console.log('加入群视频会议成功');
				} catch (error) {
					console.error('加入会议失败:', error);
					alert('加入会议失败: ' + error.message);
					this.cleanupMeeting();
				}
				// #endif
			},
			async endMeeting() {
				// #ifdef H5
				try {
					if (this.localAudioTrack) {
						this.localAudioTrack.stop();
						this.localAudioTrack.close();
					}
					if (this.localVideoTrack) {
						this.localVideoTrack.stop();
						this.localVideoTrack.close();
					}
					if (this.rtcClient) {
						await this.rtcClient.leave();
					}
					console.log('离开会议成功');
				} catch (error) {
					console.error('离开会议失败:', error);
				} finally {
					this.cleanupMeeting();
				}
				// #endif
			},
			cleanupMeeting() {
				this.remoteUsers = {};
				this.localAudioTrack = null;
				this.localVideoTrack = null;
				this.rtcClient = null;
				this.inMeeting = false;
				this.isVideoMuted = false;
				this.isAudioMuted = false;
			},
			toggleVideoMute() {
				if (this.localVideoTrack) {
					this.localVideoTrack.setEnabled(!this.isVideoMuted);
					this.isVideoMuted = !this.isVideoMuted;
				}
			},
			toggleAudioMute() {
				if (this.localAudioTrack) {
					this.localAudioTrack.setEnabled(!this.isAudioMuted);
					this.isAudioMuted = !this.isAudioMuted;
				}
			}
		},
		beforeUnmount() {
			if (this.inMeeting) {
				this.endMeeting();
			}
		}
	}
</script>

<style scoped>
	/* 基础样式 */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/deep/ .uni-web-view.uni-webview--fullscreen {
		/* top: 44px !important; */
		display: none !important;
		height: 0 !important;
	}

	/deep/ iframe {
		/* z-index: -1; */
		z-index: 9;
		/* top: 44px !important; */
		/* display: none !important; */
	}

	.wechat-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #ededed;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	}

	/* 头部样式 */
	.wechat-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		background-color: #2e2e2e;
		color: white;
		height: 50px;
	}

	.header-left,
	.header-right {
		display: flex;
		align-items: center;
	}

	.fa {
		font-size: 20px;
		margin: 0 8px;
		cursor: pointer;
	}

	.group-name {
		font-size: 18px;
		margin-left: 10px;
		font-weight: bold;
	}

	.member-count {
		font-size: 14px;
		color: #ccc;
		margin-left: 5px;
	}

	/* 聊天内容区域 */
	.chat-content {
		flex: 1;
		overflow-y: auto;
		padding: 10px;
		background-color: #f5f5f5;
	}

	.message {
		display: flex;
		margin-bottom: 15px;
	}

	.message-avatar {
		width: 36px;
		height: 36px;
		border-radius: 4px;
		overflow: hidden;
		margin: 0 8px;
		align-self: flex-end;
	}

	.message-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.message-content {
		max-width: 70%;
		display: flex;
		flex-direction: column;
	}

	.message-me .message-content {
		align-items: flex-end;
	}

	.message-other .message-content {
		align-items: flex-start;
	}

	.sender-name {
		font-size: 12px;
		color: #888;
		margin-bottom: 2px;
	}

	.message-bubble {
		padding: 8px 12px;
		border-radius: 4px;
		position: relative;
		word-break: break-word;
		line-height: 1.4;
		font-size: 15px;
	}

	.message-other .message-bubble {
		background-color: white;
		color: #333;
	}

	.message-me .message-bubble {
		background-color: #95ec69;
		color: #333;
	}

	.voice-message {
		display: flex;
		align-items: center;
		padding: 8px 15px;
	}

	.message-image {
		max-width: 200px;
		max-height: 200px;
		border-radius: 4px;
	}

	/* 输入区域 */
	.input-area {
		display: flex;
		align-items: center;
		padding: 8px 10px;
		background-color: #f5f5f5;
		border-top: 1px solid #ddd;
	}

	.input-tools {
		display: flex;
		margin-right: 8px;
	}

	.input-tools .fa {
		font-size: 22px;
		color: #7d7d7d;
	}

	.input-main {
		flex: 1;
	}

	.input-main input {
		width: 100%;
		padding: 8px 12px;
		border: none;
		border-radius: 4px;
		outline: none;
		font-size: 15px;
		background-color: white;
	}

	.voice-input {
		width: 100%;
		padding: 8px 0;
		text-align: center;
		background-color: white;
		border-radius: 4px;
		cursor: pointer;
		color: #666;
		font-size: 14px;
	}

	.input-send {
		margin-left: 8px;
	}

	.input-send button {
		padding: 8px 15px;
		background-color: #07c160;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
	}

	/* 会议弹窗 */
	.meeting-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #333;
		display: flex;
		flex-direction: column;
		z-index: 1000;
	}

	.meeting-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.video-grid {
		flex: 1;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 10px;
		padding: 10px;
		overflow-y: auto;
	}

	.video-item {
		position: relative;
		background-color: #222;
		border-radius: 8px;
		overflow: hidden;
		aspect-ratio: 4/3;
	}

	.video-wrapper {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.video-wrapper video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.user-info {
		position: absolute;
		bottom: 5px;
		left: 5px;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 3px 8px;
		border-radius: 4px;
		font-size: 12px;
	}

	.user-actions {
		position: absolute;
		bottom: 5px;
		right: 5px;
		display: flex;
		gap: 5px;
	}

	.user-actions button {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		color: white;
		border: none;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.meeting-actions {
		display: flex;
		justify-content: center;
		padding: 15px;
		gap: 20px;
		background-color: #222;
	}

	.meeting-actions button {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		color: white;
		border: none;
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.meeting-actions .end-call {
		background-color: #f44336;
	}

	/* 群成员弹窗 */
	.members-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.members-content {
		background-color: white;
		width: 80%;
		max-width: 400px;
		max-height: 70vh;
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.members-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #eee;
	}

	.members-header h3 {
		margin: 0;
		font-size: 18px;
	}

	.members-header .fa {
		color: #888;
		font-size: 20px;
	}

	.members-list {
		flex: 1;
		overflow-y: auto;
		padding: 10px 0;
	}

	.member-item {
		display: flex;
		align-items: center;
		padding: 10px 15px;
	}

	.member-avatar {
		width: 40px;
		height: 40px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.member-name {
		flex: 1;
		font-size: 16px;
	}

	.member-role {
		font-size: 12px;
		color: #888;
		margin-left: 10px;
	}
	.member-name.active{color: red;}
</style>